<template>
  <div>
    <el-input
      v-model="textarea"
      style="width: 240px"
      :rows="2"
      type="textarea"
      placeholder="请输入搜索内容"
    />
    <el-button type="primary" round @click="sends">搜索</el-button>
    <a-button type="primary" @click="showModal">添加</a-button>
    <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" type="text" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item label="职位" prop="posts">
          <el-input v-model="ruleForm.posts" type="text" />
        </el-form-item>
      </el-form>
    </a-modal>
    <el-table :data="disponse" style="width: 100%">
      <el-table-column prop="username" label="账号" width="180" />
      <el-table-column prop="password" label="密码" width="180" />
      <el-table-column prop="posts" label="职位" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <a-popconfirm
            title="Are you sure delete this task?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(scope.$index)"
            @cancel="cancel"
          >
            <el-button type="danger">删除</el-button>
          </a-popconfirm>
          <div>
            <a-button type="primary" @click="showModals(scope.$index)">编辑</a-button>
            <a-modal v-model:open="opens" title="Basic Modal" @ok="handleOks(scope.$index)">
              <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleForms"
                status-icon
                :rules="ruless"
                label-width="auto"
                class="demo-ruleForm"
              >
                <el-form-item label="账号" prop="usernames">
                  <el-input v-model="ruleForms.usernames" type="text" />
                </el-form-item>
                <el-form-item label="密码" prop="passwords">
                  <el-input v-model="ruleForms.passwords" type="password" />
                </el-form-item>
                <el-form-item label="职位" prop="posts">
                  <el-input v-model="ruleForms.posts" type="text" />
                </el-form-item>
              </el-form>
            </a-modal>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      current-page="currentPage4"
      page-size="pageSize4"
      :page-sizes="[1, 5, 10, 15]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { reactive } from 'vue'
import { message } from 'ant-design-vue';
import type { FormInstance, FormRules } from 'element-plus'
import { userpom } from "../api/login";
const tableData = ref<any>([]);
onMounted(async () => {
  const res = await userpom();
  tableData.value = res.data.data;
  console.log(res.data.data, "用户数据");
});
// 分页
const currentPage4 = ref(1);
const pageSize4 = ref(1);
const disponse = computed(() => {
  const start = (currentPage4.value - 1) * pageSize4.value;
  const ends = currentPage4.value * pageSize4.value;
  return tableData.value.slice(start, ends);
});
const handleSizeChange = (val: number) => {
  pageSize4.value = val;
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
  console.log(`current page: ${val}`);
};
// 搜索
const textarea = ref("");
const sends = () => {
  const filterseac = tableData.value.filter((item: any) => {
    return item.username.includes(textarea.value);
  });
  tableData.value = [...filterseac];
  textarea.value=""
  console.log(textarea.value);
};
// 添加
const open = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};

const handleOk = () => {
   tableData.value.push({
    username:ruleForm.username,
    password:ruleForm.password,
    posts:ruleForm.posts
   })
   ruleForm.username=""
   ruleForm.password=""
   ruleForm.posts=""
  open.value = false;
};
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  username: '',
  password: '',
  posts: '',
})
const validatePass = (rule: any, value: any, callback: any) => {
    const rexp=/^\d{5,8}$/
    if(rexp.test(value)){
        callback()
    }else{
        callback(new Error('请输入5-8位数字'))
    }
}
const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{trigger: 'blur',required:true,message:'请输入账号' }],
  password: [{ trigger: 'blur',required:true,message:'请输入密码' },
{
    validator:validatePass
}],
  posts: [{ trigger: 'blur',required:true,message:'请输入职位' }],
})
// 删除

const confirm = (index: number) => {
  tableData.value.splice(index, 1)
  message.success('Click on Yes');
};

const cancel = (e: MouseEvent) => {
  console.log(e);
  message.error('Click on No');
};
// 编辑
const opens = ref<boolean>(false);

const showModals = (scope:any) => {
  ruleForms.usernames=tableData.value[scope].username
  ruleForms.passwords=tableData.value[scope].password
  ruleForms.posts=tableData.value[scope].posts
  opens.value = true;
};

const handleOks = (scope:any) => {
    tableData.value[scope].username=ruleForms.usernames
    tableData.value[scope].password=ruleForms.passwords
    tableData.value[scope].posts=ruleForms.posts
  opens.value = false;
};
const ruleForms = reactive({
  usernames: '',
  passwords: '',
  posts:""
})
const validatePass2 = (rule: any, value: any, callback: any) => {
     const rexps=/^\d{5,8}$/
     if(rexps.test(value)){
         callback()
     }else{
      callback(new Error('密码必须是5-8位数字'))
     }
}
const ruless = reactive<FormRules<typeof ruleForms>>({
  usernames: [{  trigger: 'blur' }],
  passwords: [{  trigger: 'blur' },{
    validator:validatePass2
  }],
  posts: [{  trigger: 'blur' }],
})
</script>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
